<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品附件</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>{:lang("附件列表")}</legend>
    
</fieldset>
<div class="layui-form-item" style="margin-left: 50px;">
    <div class="layui-input-inline">
        <!--<button class="layui-btn layui-btn-danger layui-btn-sm" lay-submit="" lay-filter="serch">{:Lang('搜索')}</button>-->
        <a href="{:url('admin/product/create_pro_attachment',['id'=>$product_id])}" class="layui-btn layui-btn-sm addSupplierProduct">
            {:Lang('上传附件')}
        </a>
    </div>
</div>
<table class="layui-table" lay-even="" lay-skin="line">
    <colgroup>
        <col width="10%">
        <col width="20%">
        <col width="30%">
        <col width="10%">
        <col width="15%">
        <col width="15%">
    </colgroup>
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>简介</th>
        <th>文件名</th>
        <th>时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {notempty name="$list"}
    {volist name='list' id='value'}
    <tr>
        <td>{$value.id}</td>
        <td>{$value.show_title}</td>
        <td>{$value.description}</td>
        <td>...{$value.file_name|mb_substr=###,-10}</td>
        <td>{$value.create_time}</td>
        <td>
            <a href="{:url('admin/product/download_pro_attachment',['file_id'=>$value['id']])}" style="margin-left:10px;margin-bottom:2px;" class="layui-btn layui-btn-xs layui-btn-normal">下载</a>
            <a class="layui-btn layui-btn-xs previewProAttach" data-name="{$value.file_name}" data-url="{$value.file_url}" style="margin-bottom:2px;">预览</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger deleteProAttach" data-id="{$value.id}" style="margin-bottom:2px;">删除</a>
        </td>
    </tr>
    {/volist}
    {/notempty}
    </tbody>
</table>
</body>

<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer','form','jquery'],function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $('.deleteProAttach').click(function () {
            var file_id = $(this).attr('data-id');
            layer.confirm('确定删除该关联资源？',function () {
                $.post("/api/common/delProAttachment",{id:file_id},function (res) {
                    layer.msg(res.msg);
                    if(res.code > 0){
                        setTimeout(function () {
                            window.location.reload();
                        },1000)
                    }
                },'json')
            })
        })

        $('.previewProAttach').click(function () {
            var file_name = $(this).attr('data-name');
            var file_url = $(this).attr('data-url');
            var file_name_arr = file_name.split('.');
            var ext = file_name_arr[file_name_arr.length - 1];
            console.log(ext);
            var html = '';
            if($.inArray(ext,['mp4','mov','rmvb','avi']) > -1){
                html += '<video controls style="width: 400px"><source src="'+file_url+'"></video>';
            }else if($.inArray(ext,['jpg','jpeg','png','gif']) > -1){
                html += '<img src="'+ file_url+'" width="400px">';
            }else{
                layer.msg('预览仅支持图片和视频');return false;
            }
            layer.open({
                type:1,
                area:['400px','400px'],
                content:html,
                done:function (data) {

                }
            })
        })
    })

</script>
</html>